const webpack = require("webpack");
const path = require("path");
//引入html-webpack-plugin
const HtmlWebpackPluin = require("html-webpack-plugin");
//引入css抽离插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const config = {
  //设置模式
  mode: "development",
  //配置入口
  entry: "./src/main.js",
  //配置出口
  output: {
    //打包路径
    path: path.resolve(__dirname, "dist"),
    //打包文件名
    filename: "js/bundle.js",
    //静态资源输出目录
    assetModuleFilename: "imgs/[name][hash][ext]",
    //清理无用文件
    clean: true,
  },
  // 配置loader
  module: {
    rules: [
      //解析css
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      //解析sass
      {
        test: /\.s[ac]ss$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      //解析图片，字体图标,svg
      {
        test: /.(jpg|jpeg|gif|png|svg)$/i,
        type: "asset/resource",
      },
    ],
  },
  // 配置插件
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/pro.css",
    }),
    new HtmlWebpackPluin({
      //从哪个模板生成html
      template: "./index/index.html",
      //生成后的html文件名
      filename: "chen.html",
    }),
  ],
  // 服务器
  devServer: {
    port: 9999,
    //静态目录位置
    static: {
      directory: "dist",
    },
  },
};

module.exports = config;
